<template>
<transition>  
  <div class="me-confirm-wrapper" v-if="ifConfirmShow">
    <div class="confirm">
      <div class="info border-bottom">确认要清空吗</div>
      <div class="yes" @click="yes">确认</div>
      <div class="cancel" @click="cancel">取消</div>
    </div>
  </div>
</transition>
</template>
<script>
export default {
  name: 'meConfirm',
  data () {
    return {
      ifConfirmShow: false
    }
  },
  methods: {
    yes () { // 按下确认键触发父组件yes事件
      this.hide()
      this.$emit('yes')
    },
    cancel () { // 按下取消键触发父组件yes事件
      this.hide()
    },
    hide () { // 隐藏confirm组件
      this.ifConfirmShow = false
    },
    show () { // 显示confirm组件
      this.ifConfirmShow = true
    }
  }
}
</script>
<style lang="stylus" scoped>
.me-confirm-wrapper
  position absolute
  left 0
  top 0
  right 0
  bottom 0
  background rgba(0,0,0,0.15)
  z-index 20000
  &.v-enter-active,&.v-leave-active
    transition opacity 0.3s
  &.v-enter,&.v-leave-to
    opacity 0  
  .confirm
    position absolute
    background-color red
    top 50%
    width 380px
    height 170px
    margin-top -85px
    left 50%
    margin-left -190px
    font-size 22px
    border-radius 5px
    overflow hidden
    .info
      height 100px
      line-height 100px
      background #fff
      text-align center
    .yes,.cancel
      float left
      width 50%
      height 70px
      line-height 70px
      background #fff
      text-align center
    .yes
      color rgb(93, 101, 107)
    .cancel
      background red
      color #fff
</style>
